<template>
    <div class="home">
        <div class="block" style="padding-right: 50px; margin-top: 90px">
            <el-carousel trigger="click" height="650px">
                <div v-for="item in swiper">
                    <el-carousel-item>
                        <img :src="item.imgUrl" alt="" @click="goToUrl(item)">
                    </el-carousel-item>
                </div>
            </el-carousel>
        </div>
        <corporate-propaganda></corporate-propaganda>
        <pick-week></pick-week>
        <div class="home-foot">
            <img src="@/assets/img/common/home-last.jpg" alt="">
        </div>

    </div>
</template>

<script>
    import {sendwithget} from "../../network/profile";
    import CorporatePropaganda from "./Compons/CorporatePropaganda";
    import PickWeek from "./Compons/PickWeek";
    export default {
        name: "Home",
        data() {
            return {
                swiper: []
            }
        },
        components: {
          CorporatePropaganda,
            PickWeek,
        },
        created() {
            sendwithget({
                url: '/getSwiper'
            }).then(res=> {
                this.swiper = res.data.swiper
            })
        },
        methods: {
            goToUrl(item) {
                window.location.href = item.url
            }
        }
    }
</script>

<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }
    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }
    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    .home {
    }
    .home-foot {
    }
    .home-foot img {
        width: 100%;
    }

</style>